<template>
  <el-form :rules="rules" :model="pageInfo" ref="pageInfo">
    <el-form-item prop="title">
      <div style="margin: 20px 0">
        <el-row>
          <el-col :sm=10>
            <el-input placeholder="请输入标题" v-model="pageInfo.title"></el-input>
          </el-col>
        </el-row>
      </div>
    </el-form-item>
    <el-form-item>
      <div style="margin: 20px 0;line-height: 15px">
          <v-md-editor v-on:save="save" right-toolbar="emoji" v-model="pageInfo.content" height="500px"></v-md-editor>
      </div>
    </el-form-item>
  <div style="margin: 20px 0">
      <el-row>
        <el-col :sm={span:12}>
          <span class="description">分类</span>
          <el-select v-model="pageInfo.sid" placeholder="请选择">
            <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-col>
        <el-col :sm={span:12}>
          <span class="description">标签</span>
          <el-select v-model="pageInfo.tags" multiple placeholder="请选择">
            <el-option v-for="item in tags" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-col>
      </el-row>
    <div style="margin: 20px 0">
      <span class="description">图片地址</span>
      <el-input placeholder="请输入图片地址" style="width: 600px" v-model="pageInfo.imageAddress">
      </el-input>
    </div>
    <div style="margin: 20px 0">
      <el-input type="textarea" :autosize="{minRows: 3,maxRow: 10}" placeholder="内容描述" v-model="pageInfo.description"></el-input>
    </div>
    <el-row :gutter="20">
      <el-col :span="3">
        <span class="description">置顶</span>
        <el-switch v-model="pageInfo.isTop"></el-switch>
      </el-col>
      <el-col :span="3">
        <span class="description">赞赏</span>
        <el-switch v-model="pageInfo.appreciate"></el-switch>
      </el-col>
      <el-col :span="3">
        <span class="description">评论</span>
        <el-switch v-model="pageInfo.comment"></el-switch>
      </el-col>
    </el-row>
  </div>
  <div style="margin: 20px 0">
    <el-row>
      <el-col :sm={span:2,offset:15}>
        <el-button round @click="back">返回</el-button>
      </el-col>
      <el-col :sm={span:2,offset:1}>
        <el-button round type="success" @click="publish(true)">发布</el-button>
      </el-col>
      <el-col :sm={span:2,offset:1}>
        <el-button round type="primary" @click="publish(false)">保存</el-button>
      </el-col>
    </el-row>
  </div>
  </el-form>
</template>

<script>
import axios from 'axios'
import {ElMessage} from "element-plus"
export default {

  name: "addPage",
  data() {
    return {
      select: '',
      pageInfo: {
        id: this.$route.query.id,
        title: '',
        content: '',
        sid: '',
        tag: [],
        imageAddress: '',
        description: '',
        isTop: null,
        appreciate: null,
        comment: null,
        published: null,
        md5Password: 'C11655E95E2FD66FD6294F53150F5F3F'
      },
      tags: [],
      types: [],
      rules: {}
    }
  },
  mounted() {
    let id = this.$route.query.id;
    if (id != undefined) {
      axios.get("/admin/editorPage", {params: {id: id}}).then((res) => {
        this.pageInfo = res.data;
      })
    }
    axios.get("/admin/noPage/listTypes").then((res) => {
      this.types = res.data
    })
    axios.get("/admin/noPage/listTags").then((res) => {
      this.tags = res.data
    })
  },
  methods: {
    save(){
      this.publish(false);
    },
    back() {
      this.$router.replace({name: 'blogs'})
    },
    publish(method){
        this.pageInfo.published = method;
        this.pageInfo.md5Password = localStorage.getItem("password");
        if ( this.pageInfo.id != undefined){
            axios.post("/admin/updatePage",this.pageInfo).then( (res) => {
              if ( res.data === true){
                ElMessage.success("修改成功");
                this.$router.push({
                  name: 'blogs'
                })
              }
              else
                ElMessage.error("修改失败")
            })
        }
        else {
          axios.post("/admin/addPage",this.pageInfo).then( (res) => {
            if ( res.data === true){
              ElMessage.success("添加成功")
              this.$router.push({
                name: 'blogs'
              })
            }
            else
              ElMessage.error("添加失败")
          })
        }
    }
  }
}
</script>

<style scoped>
.description {
  color: #646a7c;
  margin-right: 5px;
}
</style>